<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>功能演示</span>
        </div>
      </template>
      <div class="demo-content">
        <el-alert
          title="一级菜单功能已实现"
          type="success"
          description="您现在可以通过面包屑导航栏的一级菜单选择器来切换不同的功能模块，左侧菜单会相应更新。"
          show-icon
          :closable="false"
        />

        <div class="feature-list" style="margin-top: 20px">
          <h3>已实现的功能模块：</h3>
          <el-row :gutter="20">
            <el-col :span="8" v-for="module in moduleList" :key="module.value">
              <el-card class="module-card">
                <div class="module-info">
                  <svg-icon :icon-class="module.icon" class="module-icon" />
                  <h4>{{ module.label }}</h4>
                  <p>{{ module.description }}</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";

const moduleList = ref([
  {
    value: "water",
    label: "用水",
    icon: "water",
    description: "用水监控、分析和管理功能",
  },
  {
    value: "electricity",
    label: "用电",
    icon: "electricity",
    description: "用电监控、分析和管理功能",
  },
  {
    value: "gas",
    label: "用气",
    icon: "gas",
    description: "用气监控、分析和管理功能",
  },
  {
    value: "heat",
    label: "用热",
    icon: "heat",
    description: "用热监控、分析和管理功能",
  },
  {
    value: "device",
    label: "设备管理",
    icon: "device",
    description: "设备监控、维护和管理功能",
  },
  {
    value: "alarm",
    label: "报警处置",
    icon: "alarm",
    description: "报警监控、处理和历史记录功能",
  },
  {
    value: "other",
    label: "其他功能",
    icon: "other",
    description: "报表管理、统计分析和系统设置功能",
  },
]);
</script>

<style lang="scss" scoped>
.demo-content {
  .feature-list {
    h3 {
      margin-bottom: 16px;
      color: #333;
    }
  }

  .module-card {
    margin-bottom: 16px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .module-info {
      text-align: center;

      .module-icon {
        font-size: 32px;
        margin-bottom: 12px;
        display: block;
      }

      h4 {
        margin: 0 0 8px 0;
        color: #333;
      }

      p {
        margin: 0;
        color: #666;
        font-size: 14px;
      }
    }
  }
}
</style>
